// ---------- Event handler demo ----------
type ButtonEvent =
  | "click"
  | "focus"
  | "mouseOver";

type On<T> = {
  [K in T as K extends string ? `on${Capitalize<K>}` : never]: () => void;
};

const userActions: On<ButtonEvent> = {
  onClick: function (): void {
    console.log("clicked");
  },
  onFocus: function (): void {
    console.log("focused");
  },
  onMouseOver: function (): void {
    console.log("mouse over");
  },
};

// ---------- Task Status demo ----------
const TASK_STATUS = {
  CIPTKOPEN: "Open",
  CIPTKINP: "In Progress",
  CIPTKCLOSE: "Closed",
  CIPTKNO: "Not Relevant",
  CIPTKBLK: "Blocked",
} as const;

// What we want to derive from the above object:
type TaskStatusOption =
  | { id: "CIPTKOPEN"; text: "Open" }
  | { id: "CIPTKINP"; text: "In Progress" }
  | { id: "CIPTKCLOSE"; text: "Closed" }
  | { id: "CIPTKNO"; text: "Not Relevant" }
  | { id: "CIPTKBLK"; text: "Blocked" };

type TaskStatusObjectType = typeof TASK_STATUS;
type TaskStatusId = keyof TaskStatusObjectType;

type TaskStatus = {
  [K in TaskStatusId]: { id: K; text: TaskStatusObjectType[K] };
}[TaskStatusId];

function processStatus(status: TaskStatus) {
  console.log(status);
}

processStatus({ id: "CIPTKINP", text: "In Progress" });
processStatus({ id: "CIPTKINP", text: "Blocked" }); // ERROR
